<template>
  <view class="min-h-[100vh] bg-[var(--page-bg-color)]  overflow-hidden" :style="themeColor()">
    <view class="fixed left-0 right-0 top-0 z-99">
      <view class="bg-[#fff] px-[var(--sidebar-m)] py-[14rpx] flex items-center">
        <view class="search-input">
          <text class="nc-iconfont nc-icon-sousuo-duanV6xx1 btn" @click="searchTypeFn()"></text>
          <input class="input" maxlength="50" type="text" v-model="keyword" placeholder="请输入搜索会员名称"
            placeholderClass="text-[var(--text-color-light9)] text-[24rpx]" confirm-type="search"
            @confirm="searchTypeFn()">
          <text v-if="keyword" class="nc-iconfont nc-icon-cuohaoV6xx1 clear" @click="keyword = ''"></text>
        </view>
      </view>
      <view class="tab-style-3 pt-[4rpx] bg-[#fff]">
        <view class="tab-items"
          :class="{ '!text-primary class-select': fromType.account_data_gt === item.account_data_gt }"
          v-for="(item, index) in accountTypeList" :key="index" @click="fromTypeFn(item, index)">{{ item.name }}
        </view>
      </view>
    </view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getListFn" top="182rpx">
      <view class="pt-[var(--top-m)] body-bottom" v-if="list.length">
        <view v-for="(item, index) in list" :key="item.id"
          class="sidebar-margin mb-[var(--top-m)] card-template relative">
          <view class="flex items-center justify-between mb-[20rpx]">
            <view class="text-[28rpx] font-500 text-[#333] flex   items-center  leading-[40rpx]">
              <u-avatar :src="item.avatar" size="30" leftIcon="none"
                :default-url="img('static/resource/images/default_headimg.png')" />
              <view class="ml-[22rpx]">
                <view class="text-[#222222] flex pr-[50rpx] flex-wrap items-center">
                  <view class="text-[#222222] truncate max-w-[320rpx]   mr-[16rpx]">{{ item.nickname }}
                  </view>
                </view>
              </view>
            </view>
            <view class="absolute right-[30rpx] top-[30rpx] text-[28rpx] font-500  leading-[50rpx] price-font">
              {{ item.brokerageUserCount || 0 }}人 {{ item.orderCount || 0 }}单 {{ item.brokeragePrice || 0 }}元</view>
          </view>
          <view class="text-[24rpx] text-[var(--text-color-light6)] mb-[14rpx]" v-if="item.memo">{{ item.memo }}</view>
          <view class="text-[24rpx] text-[var(--text-color-light6)]">
            加入时间:{{ timeFormat(item.brokerageTime, 'yyyy-mm-dd hh: MM: ss') }} </view>
        </view>
      </view>
      <mescroll-empty :option="{ tip: tip }" v-if="!list.length && loading"></mescroll-empty>
    </mescroll-body>

  </view>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive } from 'vue'
import { t } from '@/locale'
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { getBrokerageUserChildSummaryPage } from './../api/commission';
import { img } from '@/utils/common';
import { onPageScroll, onReachBottom, onLoad, onShow } from '@dcloudio/uni-app';
import { timeFormat } from '@/utils/formatting';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const tip = ref('暂无推广人')

onLoad((options: any) => {

});

const keyword = ref<string>('')
const create_time = ref([])
//来源类型
const fromType = ref({
  account_data_gt: 1
})
const accountTypeList = ref([
  { name: '一级', account_data_gt: 1 },
  { name: '二级', account_data_gt: 2 },
])
const list = ref<Array<any>>([]),
  loading = ref<boolean>(false),
  mescrollRef = ref(null);

interface mescrollStructure {
  num: number,
  size: number,
  endSuccess: Function,
  [propName: string]: any
}

const getListFn = (mescroll: mescrollStructure) => {
  loading.value = false;
  let data: Object = {
    pageNo: mescroll.num,
    pageSize: mescroll.size,
    nickname: keyword.value,
    level: fromType.value.account_data_gt
  };
  interface acceptingDataStructure {
    data: acceptingDataItemStructure,
    msg: string,
    code: number
  }
  interface acceptingDataItemStructure {
    data: object,
    [propName: string]: number | string | object
  }

  let fnList: any = (params: any) => { };

  fnList = getBrokerageUserChildSummaryPage;

  fnList(data).then((res: any) => {
    let newArr = res.data.list;
    mescroll.endSuccess(newArr.length);
    //设置列表数据
    if (mescroll.num == 1) {
      list.value = []; //如果是第一页需手动制空列表
    }
    list.value = list.value.concat(newArr);
    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}

// 关键词搜索条件搜索
const searchTypeFn = () => {
  list.value = [];
  getMescroll().resetUpScroll();
}
// 类型搜索
const fromTypeFn = (data: any, index: number) => {
  fromType.value.account_data_gt = data.account_data_gt
  list.value = []
  getMescroll().resetUpScroll();
}


</script>

<style lang="scss">
.body-bottom {
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
</style>
